<template>
  <div>

    <!--    <el-carousel :interval="4000" type="card" height="800px">-->
    <!--      <el-carousel-item v-for="item in photo_list" :key="item.id">-->
    <!--&lt;!&ndash;        <el-image :src="item.url" lazy></el-image>&ndash;&gt;-->
    <!--        <img  :src="item.url"  style="height: 100%;width: 100%" class="img-thumbnail"/>-->
    <!--      </el-carousel-item>-->
    <!--    </el-carousel>-->


    <div v-for="item in photo_list" :key="item.id" class="block-image"
         @mouseenter="hideName(item.id)"
         @mouseleave="showName(item.id)">
      <div>
        <el-image :src="item.url" lazy></el-image>
        <div class="name" v-show="!hiddenNames.includes(item.id)">{{ item.name }}</div>
      </div>
    </div>

  </div>
</template>
<script>
import {list} from "@/js/api/photo/photo"

export default {
  name: "photoList",
  data() {
    return {
      photo_list: [],
      queryCondition: {
        pageSize: 1,
        pageNum: 50,
        isDelete: 0
      },
      hiddenNames: []
    }
  },
  created() {
    this.loadPhotoList()
  },
  methods: {
    loadPhotoList() {
      let data = {
        pageSize: this.queryCondition.pageSize,//查询第几页
        pageNum: this.queryCondition.pageNum,//一页显示多少行
        delete: this.queryCondition.isDelete
      }
      list(data).then(res => {
        this.photo_list = res.data.data.list
      })
    },

    hideName(id) {
      if (!this.hiddenNames.includes(id)) {
        this.hiddenNames.push(id);
      }
    },
    showName(id) {
      const index = this.hiddenNames.indexOf(id);
      if (index !== -1) {
        this.hiddenNames.splice(index, 1);
      }
    }


  }
}
</script>

<style>
.block-image {
  display: inline-block;
  margin: 10px;
  position: relative;
}

.block-image img {
  width: 300px;
  height: 300px;
}

.block-image .name {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

</style>


